<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			/* div#app{
				position: relative;
			}
			div#app>div{
				border-radius: 100%;
				background-color: red;
				width: 50px;
				height: 50px;
			} */
			html,body{
				height: 100%;
				overflow: hidden;
			}
			div#app{
				position: relative;
				height: 100%;
				overflow: hidden;
			}
			div#app>div.ball{
				border-radius: 100%;
				position: absolute;
				z-index: 1;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<!-- <div id="">
				
			</div> -->
		</div>
		<script type="text/javascript">
			
			function Ball(color,top,left,width){
				//通过构造函数创建的小球的私有属性
				this.color=color;
				this.top=top;
				this.left=left;
				this.width=width;
			}
			
			var t1;
			Ball.prototype.create=function(){
				//通过构造函数创建的所有小球的共有属性
				var app=document.getElementById("app");
				
				var div=document.createElement("div");
				
				div.className="ball";
				div.style.width=div.style.height=this.width+"px";
				div.style.backgroundColor=this.color;
				
				div.style.top=this.top+"px";
				div.style.left=this.left+"px";
				
				app.appendChild(div);
				
				t1=setTimeout(function(){
					app.removeChild(div);
				},2000)
			}
			
			//创建一个小球
			function maBall(){
				var color=getColor();
				var top=getMax(500);
				var left=getMax(1100);
				var width=getMax(100);
				width>=30?width:(width=30);
				
				var b=new Ball(color,top,left,width);
				
				b.create();
			}
			
			function getColor(){
				var color2=`rgb(${getMax(256)},${getMax(256)},${getMax(256)})`;
				return color2;
			}
			
			function getMax(n){
				return parseInt(Math.random()*n);
			}
			
			var t2=setInterval(function(){
				maBall();
			},100)
			// var b1=new Ball("red",50,100,20)
			// console.log("1b1:",b1);
			
		</script>
	</body>
</html>
